<template name="BmiWeightChart">
	<view style="display: flex;justify-content: center;align-items: center;">
		<canvas canvas-id="weightCanvas" id="weightCanvas" class="charts" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
	</view>
</template>

<script>
	import uCharts from '../js_sdk/u-charts/u-charts/u-charts.js'
	var _self;
	var weightCanvas=null;

	export default {
		name:"BmiWeightChart",
		
		props:{
			monthBaseValues: {
				type: Array,
				default () {
					return []
				}
			},
			
			beginIndex: {
				type: Number,
				default() {
					return 0
				}
			},
			
			endIndex: {
				type: Number,
				default() {
					return 0
				}
			},
			
			actualMonth: {
				type: Number,
				default () {
					return 0
				}
			},
			
			lineValues:{
				type: Array,
				default () {
					return []
				}
			},
			
			lineNames: {
				type: Array,
				default () {
					return []
				}
			}
		},
		
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			};
		},
		
		created() {
			_self = this;
			this.cWidth=uni.upx2px(700);
			this.cHeight=uni.upx2px(500);
			this.initData();
		},
		
		methods: {
			initData() {

				let LineA = {
					categories: [],
					series: []
				};
				
				LineA.categories = this.$props.monthBaseValues.slice(this.$props.beginIndex, this.$props.endIndex);
				for (var index in this.$props.lineNames){
					var series = {
						name: '',
						data: [],
					}
					series.name = this.$props.lineNames[index];
					series.data = this.$props.lineValues[index].slice(this.$props.beginIndex,this.$props.endIndex);
					LineA.series[index] = series;
				}
				_self.showLineA("weightCanvas",LineA);
			},
			
			showLineA(canvasId,chartData){
				weightCanvas=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					padding:[5,5,5,5],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:2,
					},
					dataLabel:false,
					dataPointShape:true,
					dataPointShapeType:'hollow',
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: false,//开启图表拖拽功能
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:10,
						scrollShow:true,
						scrollAlign:'left',
						format:(val)=>{return val + '月'}//如不写此方法，Y轴刻度默认保留两位小数
					},
					yAxis: {
						//disabled:true
						gridType:'dash',
						format:(val)=>{return val.toFixed(0)+'kg'}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					},
				});
			},
			
			touchLineA(e){
				weightCanvas.scrollStart(e);
			},
			moveLineA(e) {
				weightCanvas.scroll(e);
			},
			touchEndLineA(e) {
				weightCanvas.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				weightCanvas.touchLegend(e);
				weightCanvas.showToolTip(e, {
					format: function (item, category) {
						return item.name + ':' + item.data + 'kg'
					}
				});
			},
		}
	}
</script>

<style>
	.charts {
		width: 95%;
		height: 500upx;
		/* background-color: #007AFF; */
	}	
</style>
